<template>
    <div class="platform">
        <my-tag title="设计方案审核" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="detailSchemRef" :rules="rules" :model="detailSchemForm" label-width="140px" label-position="left"
                class="demo-ruleForm platform-formList">
                <div class="form-left-six">
                    <el-form-item label="设计师昵称" prop="designerName">
                        <el-select disabled v-model="detailSchemForm.decorDesignerId" filterable placeholder="请输入或选择设计师昵称"
                            size="large">
                            <el-option v-for="item in designerListData" :key="item.designerId" :label="item.designerName"
                                :value="item.designerId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="作品名称" prop="schemeName">{{ detailSchemForm.schemeName }}</el-form-item>
                    <el-form-item label="小区名称" prop="address">{{ detailSchemForm.address }}</el-form-item>
                    <el-form-item label="设计理念" prop="designIdea">{{ detailSchemForm.designIdea }}</el-form-item>
                    <el-form-item label="户型图" prop="layoutImageUrl">
                        <image-preview v-for="v in detailSchemForm.layoutImageUrl" :key="v.ossId" :src="v.url" :width="100"
                            :height="100" style="margin:0 10px 10px 0"></image-preview>
                    </el-form-item>
                    <el-form-item label="房间区域相册">
                        <el-table :data="storeAllSpace">
                            <el-table-column>
                                <template #default="scope">
                                    <div class="room-space">
                                        <div class="space-title">
                                            <div class="title">{{ scope.row.schemName }} </div>
                                        </div>
                                        <div class="space-img">
                                            <image-preview v-for="v in scope.row.schemImgUrl" :key="v.ossId" :src="v.url"
                                                :width="100" :height="100" style="margin:0 10px 10px 0"></image-preview>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>

                </div>
                <div class="form-right-four">
                    <el-form-item label="封面图" prop="coverImageUrl">
                        <ImagePreview :src="detailSchemForm.coverImageUrl" :width="100" :height="100"
                            :preview-src-list="[detailSchemForm.coverImageUrl]" style="margin:0 10px 10px 0" />
                    </el-form-item>
                    <el-form-item label="面积" prop="area">
                        <div>{{ detailSchemForm.area || '---' }} ㎡</div>
                    </el-form-item>
                    <el-form-item label="参考预算价(万元)" prop="priceLower">
                        <div>¥{{ parseFloat(detailSchemForm.priceLower) / 10000 || '---' }} ~ ¥{{
                            parseFloat(detailSchemForm.priceUpper) / 10000 || '---' }}</div>
                    </el-form-item>
                    <el-form-item label="户型">
                        {{ detailSchemForm.bedrooms }}室 {{ detailSchemForm.livingRooms }}厅 {{ detailSchemForm.bathrooms }}卫
                        {{ detailSchemForm.kitchens }}厨
                    </el-form-item>
                    <el-form-item label="风格" prop="style">{{ detailSchemForm.style }}</el-form-item>
                    <el-form-item label="上传时间" prop="createTime">{{ detailSchemForm.createTime }}</el-form-item>
                    <el-form-item label="审核：" prop="schemStatus" style="width:100%;min-width:340px;">
                        <el-select v-model="detailSchemForm.schemStatus" placeholder="请选择" size="large">
                            <el-option label="通过" :value="1" />
                            <el-option label="未通过" :value="2" />
                            <el-option label="已下架" :value="3" :disabled="detailSchemForm.rootId" />
                            <el-option label="待审核" :value="0" disabled />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="detailSchemForm.schemStatus === 2" label="未通过原因：" prop="remark"
                        style="width:100%;min-width:340px;">
                        <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="detailSchemForm.remark"
                            @focus="remarkLimit = true" @blur="remarkLimit = false" :show-word-limit="remarkLimit"
                            maxlength="100" placeholder="请输入未通过原因" />
                    </el-form-item>
                </div>
            </el-form>

            <div class="platform-submit-btn">
                <div class="dialog-footer">
                    <el-button type="primary" size="small" @click="submitForm">提 交</el-button>
                    <el-button @click="cancel" size="small">返 回</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getSchem, updateSchem } from "@/api/decor/schem";
import { getImgUrl, listDesigner } from "@/api/decor/designer";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
// 设计师下拉数据
const designerListData = ref([])
let remarkLimit = ref(false)
let storeAllSpace = ref([])
const data = reactive({
    detailSchemForm: {},
    rules: {
        remark: [
            { required: true, message: "未通过原因不能为空", trigger: "blur" }
        ],
    }
});

const { detailSchemForm, rules } = toRefs(data);
// 获取设计方案详情信息
(() => {
    const schemeId = route.params.schemeId
    if (schemeId) {
        getSchem(schemeId).then((res) => {
            let editSchemData = res.data
            let _temp = []
            editSchemData.coverImageUrl = '';
            editSchemData.layoutImageUrl = '';
            let imgUrlPromises = [];
            // 获取封面图的异步操作
            if (editSchemData.coverImage) {
                let avatarPromise = getImgUrl(editSchemData.coverImage).then((res) => {
                    editSchemData.coverImageUrl = res.data[0].url;
                });
                imgUrlPromises.push(avatarPromise);
            }
            if (editSchemData.layoutIds) {
                // 获取户型图片的异步操作
                let coverImagePromise = getImgUrl(editSchemData.layoutIds).then((res) => {
                    editSchemData.layoutImageUrl = res.data;
                });
                imgUrlPromises.push(coverImagePromise);
            }
            res.data.schemDetails.forEach((v) => {
                if (v.schemImgId) {
                    let promise = getImgUrl(v.schemImgId).then((res) => {
                        _temp.push({
                            schemName: v.schemName,
                            schemImgId: v.schemImgId,
                            classTypeId: v.classTypeId,
                            schemImgUrl: res.data,
                            schemDetailId: v.schemDetailId,
                            version: v.version
                        });
                    });
                    imgUrlPromises.push(promise);
                }
            })
            Promise.all(imgUrlPromises).then(() => {
                storeAllSpace.value = _temp
                detailSchemForm.value = editSchemData
            });
        })
    }
})()
// 获取设计师下拉列表数据
const getDesignerList = () => {
    listDesigner({
        designerStatus: 1,
        orderByColumn: 'id',
        isAsc: 'desc'
    }).then((res) => {
        designerListData.value = res.rows
    })
}
// 提交按钮
function submitForm() {
    proxy.$refs["detailSchemRef"].validate(valid => {
        if (valid) {
            let decorSchemDetailBoList = []
            storeAllSpace.value.forEach((v) => {
                decorSchemDetailBoList.push({
                    schemName: v.schemName,
                    classTypeId: v.classTypeId,
                    schemImgId: v.schemImgId,
                    schemDetailId: v.schemDetailId,
                    version: v.version
                })
            })
            const data = {
                decorSchemBo: detailSchemForm.value,
                decorSchemDetailBoList: decorSchemDetailBoList
            }
            proxy.$modal.confirm('是否确认提交当前操作？').then(function () {
                return updateSchem(data);
            }).then(() => {
                proxy.$modal.msgSuccess("提交成功");
                router.go(-1)
            }).catch(() => { });
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回
const cancel = () => {
    router.go(-1)
}
getDesignerList()
</script>
<style lang="scss" scoped>
.hoseType {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .hoseType-box {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .unit {
            font-family: NotoSansHans, NotoSansHans;
            font-weight: 600;
            font-size: 14px;
            color: #000000;
            line-height: 21px;
            font-style: normal;
            padding: 0 4px 0 4px;
        }
    }
}

.coverImg-style {
    width: 100%;

    ::v-deep(.el-upload-list--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 320px;
        height: 240px;
        border-radius: 8px;
        border: 1px solid #CDD4E0;
    }

}

::v-deep(.el-table) {
    border: none !important;
}

::v-deep(.el-table .cell) {
    padding: 0;
}

::v-deep(.el-table .el-table__cell) {
    padding: 0;
}

::v-deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
    height: 0 !important;
    background-color: transparent !important;
}

::v-deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
    border-bottom: none;
}
</style>